<template>
  <h1>App</h1>
  <!-- 点击该按钮跳转到 /index 同时实现登录本地存储 token 字段 -->
  <!-- 采用 push name 形式进行跳转  -->
  <button @click="toIndex()">login name</button>
  <!-- 点击该按钮跳转到 / 同时实现登出，清除本地存储 token 字段 -->
  <!-- 采用 push path 形式跳转 -->
  <button @click="toLogin()">logout path</button>
  <br />
  <!-- 点击该按钮，页面根据历史记录前进一步 -->
  <button @click="go()">go</button>
  <!-- 点击该按钮，页面根据历史记录后退一步 -->
  <button @click="back()">back</button>
  <br />
  <!-- 点击该按钮向 routes 数组中添加 /c 路由 -->
  <!-- 注意：由于设置了路由守卫，故在初始来到该页面时，前置和后置路由守卫会警告缺少 /c 路由信息 -->
  <button @click="getC()">getC</button>
  <!-- 点击该链接会跳转到 /c 页面 -->
  <!-- 仅能通过路由模式，在获取到 /c 路由后进行跳转，直接 /c url 访问会刷新页面，刷新后会丢失 /c 路由，无法访问 -->
  <router-link to="/c">toC</router-link>
  <!-- 采用默认命名的视图，用于存放 /c 路由的组件 -->
  <router-view></router-view>
  <hr />
  <div class="box">
    <div class="box-left">
      <!-- 使用命名视图，分别存放不同的组件，当页面跳转时，不同的视图根据命名独立切换存放的组件 -->
      <!-- 在 App 组件中，命名视图存放 Index Login Public 组件 -->
      <router-view name="A"></router-view>
    </div>
    <div class="box-right">
      <router-view name="B"></router-view>
    </div>
  </div>
</template>
<script setup lang="ts">
// 导入 useRouter hook 函数
import { useRouter } from 'vue-router'
// 调用 useRouter 创建 router 对象
const router = useRouter()
// toIndex 点击 login 按钮后会跳转到 '/index' 且或保存 token
const toIndex = () => {
  // 页面跳转
  router.push({
    name: 'Index',
  })
  // 生成 token
  localStorage.setItem('token', '1')
}
// toLogin 点击 logout 按钮后会跳转到 '/login' 且清除 token
const toLogin = () => {
  // 页面跳转
  router.push({
    path: '/',
  })
  // 清除 token
  localStorage.removeItem('token')
}
// go 点击 go 按钮后会根据历史记录向前一页
const go = () => {
  // 路由根据浏览器历史向前一页
  router.go(1)
}
// back 点击 back 按钮后会根据历史记录向后一页
const back = () => {
  // 路由根据浏览器历史后前一页
  router.back()
  // router.go(-1)
}
const getC = () => {
  // 调用 router 对象上操作 route 的相关方法，可以实现动态路由
  // 动态路由：即 route 对象的增删改
  // hasRoute 验证是否已经添加过路由 /c 避免重复添加
  if(!router.hasRoute('C')){
    // 未添加则调用 addRoute 进行 /c 路由添加
    router.addRoute({
    path: '/c',
    name:'C',
    meta: {
      title: '动态页面',
    },
    component: () => import('./components/C.vue'),
  })
  // 完成添加后，调用 getRoutes 返回所有路由信息
  console.log(router.getRoutes())
  }
}
</script>
<style lang="less">
.box {
  display: flex;
  justify-content: space-around;
  &-left,
  &-right {
    width: 400px;
    height: 400px;
    background-color: lightgray;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
